<template>
  <el-dropdown class="avatar-container" trigger="click">
    <template #default>
      <div class="avatar-wrapper">
        <span class="el-dropdown-link">
          <img src="@/assets/logo.png" class="user-avatar" />
          <i class="el-icon-caret-bottom"></i>
        </span>
      </div>
    </template>
    <template #dropdown>
      <el-dropdown-menu class="user-dropdown">
        <el-dropdown-item>
          <router-link to="/">HOME</router-link>
        </el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style lang="scss">
.avatar-container {
  margin-right: 30px;
  .avatar-wrapper {
    height: 50px;
    overflow: hidden;
    .user-avatar {
      width: 50px;
    }
    i {
      float: right;
      margin-top: 30px;
    }
  }
}
</style>